導(dǎo)讀:A5創(chuàng)業(yè)項(xiàng)目春季招商 好項(xiàng)目招代理無(wú)憂在過(guò)去的幾年里,扁平化設(shè)計(jì)以其簡(jiǎn)約的畫(huà)面、整潔的布局、流暢的加載速度、響應(yīng)式設(shè)計(jì)等眾多優(yōu)勢(shì)俘虜了一大批粉絲,正逐漸成為網(wǎng)站設(shè)計(jì)趨
發(fā)表日期:2019-07-19
文章編輯:興田科技
瀏覽次數(shù):12232
標(biāo)簽:
A5創(chuàng)業(yè)項(xiàng)目春季招商 好項(xiàng)目招代理無(wú)憂
在過(guò)去的幾年里,扁平化設(shè)計(jì)以其簡(jiǎn)約的畫(huà)面、整潔的布局、流暢的加載速度、響應(yīng)式設(shè)計(jì)等眾多優(yōu)勢(shì)俘虜了一大批粉絲,正逐漸成為網(wǎng)站設(shè)計(jì)趨勢(shì)的主流。這種設(shè)計(jì)趨勢(shì)為什么能極短的時(shí)間內(nèi)迅速發(fā)展壯大?除了以上這些優(yōu)點(diǎn),還有一項(xiàng)十分重要的因素,那就是扁平化設(shè)計(jì)一直與時(shí)俱進(jìn),不斷克服自身的弊端,努力跟上時(shí)代的步伐,滿足用戶的需求。早期的扁平化設(shè)計(jì)強(qiáng)調(diào)放棄一切裝飾效果如陰影、漸變、紋理等,重點(diǎn)突出信息本身,這使得網(wǎng)站的視覺(jué)效果很是單調(diào),網(wǎng)站的配色方案也比較單一,但在后期發(fā)展過(guò)程中,扁平化設(shè)計(jì)開(kāi)始突破原有的局限性,積極吸納一些新的、有用的設(shè)計(jì)元素,有關(guān)扁平化設(shè)計(jì)方面的想法和概念不斷豐富,扁平化設(shè)計(jì)也開(kāi)始出現(xiàn)新的類型和分支。在今天,扁平化設(shè)計(jì)的呈現(xiàn)方式多種多樣,不管你想做一個(gè)什么樣的網(wǎng)站,總有幾款扁平化設(shè)計(jì)能讓你傾心。今天小飛就帶您看一下扁平化設(shè)計(jì)的發(fā)展歷程以及一些實(shí)例,快來(lái)一起感受扁平化設(shè)計(jì)的進(jìn)擊之旅吧!
早期的扁平化設(shè)計(jì) V1.0
在扁平化設(shè)計(jì)出現(xiàn)以前,人們一直很喜歡擬物化設(shè)計(jì),通過(guò)逼真的紋理、多樣的漸變以及復(fù)雜的細(xì)節(jié)營(yíng)造出3D效果,讓虛擬物更接近于實(shí)物,模仿真實(shí)事物的外觀。蘋(píng)果公司也曾是這種設(shè)計(jì)風(fēng)格的忠實(shí)支持者之一,它的應(yīng)用商店和各種設(shè)備上圖標(biāo)都有使用擬物化設(shè)計(jì)(當(dāng)然,后期也轉(zhuǎn)向于扁平化設(shè)計(jì))。然而,在2010年,扁平化設(shè)計(jì)開(kāi)始向超現(xiàn)實(shí)的擬物化設(shè)計(jì)發(fā)起沖擊。扁平化設(shè)計(jì)使用棱角分明的線條,讓信息和事物的工作方法以簡(jiǎn)單直接的方式呈現(xiàn)出來(lái),這更便于訪客理解。扁平化網(wǎng)站的設(shè)計(jì)方案也集中在高飽和度的色彩和排版上,而不是大量的圖像,這減少了網(wǎng)站不必要的加載時(shí)間。
這就是早期的扁平化設(shè)計(jì),強(qiáng)調(diào)去除冗余、厚重和繁雜的裝飾效果,避免做出3D效果的元素,使用簡(jiǎn)潔風(fēng)格的圖標(biāo),聚焦于抽象、極簡(jiǎn)和符號(hào)化。但它也有自己的不足。由于強(qiáng)調(diào)剝離細(xì)節(jié)設(shè)計(jì),主要依靠信息本身,在用戶引導(dǎo)方面也并不總是那么順暢;單調(diào)的視覺(jué)效果和單一配色方案難以滿足大眾的口味。不過(guò)事實(shí)也證明絕大多數(shù)設(shè)計(jì)師還是喜歡這種設(shè)計(jì)趨勢(shì)的,這點(diǎn)從它的不斷發(fā)展中就可以看出來(lái)??偠灾?,扁平化設(shè)計(jì)可能是過(guò)去十年里最偉大的和最具革命性的一種設(shè)計(jì)趨勢(shì)。
Material Design [1.0和2.0的中間時(shí)代]
Material Design是谷歌為其產(chǎn)品和軟件推出的一種視覺(jué)設(shè)計(jì)語(yǔ)言,是一套設(shè)計(jì)標(biāo)準(zhǔn)文檔的集合。它吸取了扁平化設(shè)計(jì)中最精華的部分,同時(shí)又添加一些微妙的擬物化元素,比如使用陰影顯示分層,使用動(dòng)畫(huà)引起用戶交互,保證網(wǎng)站的可用性和用戶的互動(dòng)性。它讓扁平化設(shè)計(jì)更加開(kāi)放,一些規(guī)定也沒(méi)有早期那么苛刻。
扁平化設(shè)計(jì)發(fā)展如此迅速背后一個(gè)主要的推動(dòng)力就是Material Design。雖然Material Design 的概念很明確,但它也隨著網(wǎng)站趨勢(shì)和用戶需求的改變不斷變化。它可以看作一種設(shè)計(jì)框架和模板,具有普遍適用性。從某種意義上來(lái)說(shuō),Material Design可以看做早期的扁平化設(shè)計(jì)和扁平化2.0的一個(gè)過(guò)渡,或者說(shuō)它促進(jìn)了扁平化設(shè)計(jì)的進(jìn)一步演變。不過(guò),Material design畢竟是與谷歌直接聯(lián)系在一起的,在創(chuàng)建一個(gè)獨(dú)特的網(wǎng)站上面沒(méi)有那么有效。
扁平化 2.0
接下來(lái)就是扁平化2.0的時(shí)代了。扁平化 2.0 這個(gè)概念最早來(lái)源于設(shè)計(jì)師 Ryan Allen。扁平化 2.0 是一種演變,而不是一場(chǎng)革命。扁平化2.0只是扁平化設(shè)計(jì)的一個(gè)分支,它給扁平化設(shè)計(jì)重新賦予了新的內(nèi)涵,是這個(gè)概念沉淀之后逐漸成熟的標(biāo)志。扁平化 2.0允許設(shè)計(jì)師打破其原有的強(qiáng)硬規(guī)定,帶來(lái)了一些微妙的元素和技巧,如高光強(qiáng)調(diào)、漸變、多種色調(diào)和色度、陰影效果、多種配色方案。在扁平化中使用微陰影可以增加元素深度,將重要內(nèi)容從背景中獨(dú)立出來(lái),有效傳遞信息;將低調(diào)的漸變用于背景色或氛圍色能夠?qū)崿F(xiàn)元素的過(guò)渡,給網(wǎng)站籠罩一種和諧、朦朧感。當(dāng)然,這些新元素的添加都是適度的,是符合扁平化的美學(xué)標(biāo)準(zhǔn)的。也因此,扁平化2.0在易用性和適用性更強(qiáng),兼顧了設(shè)計(jì)的美觀和功能性,幾乎可以和任何其他概念一起結(jié)合使用,網(wǎng)站的用戶友好度大大提升,扁平化2.0受到很多設(shè)計(jì)師的歡迎,不少網(wǎng)站都應(yīng)用了這一設(shè)計(jì)趨勢(shì)。另外,也有一些設(shè)計(jì)趨勢(shì)從扁平化2.0中衍生出來(lái),最流行的可能要數(shù)卡片式設(shè)計(jì)和分屏式設(shè)計(jì)了,扁平化這棵大樹(shù)的枝干越來(lái)越多。
扁平化設(shè)計(jì)2017
在今天,不少設(shè)計(jì)師繼續(xù)進(jìn)行有關(guān)扁平化設(shè)計(jì)的嘗試,在設(shè)計(jì)手法或細(xì)節(jié)處理中又融入了越來(lái)越多的想法。扁平化設(shè)計(jì)進(jìn)入了一個(gè)新的發(fā)展階段,由于這個(gè)發(fā)展階段暫時(shí)還沒(méi)有人命名,小飛姑且稱它為扁平化設(shè)計(jì)2017,下面是當(dāng)今扁平化網(wǎng)站中的一些共同特征,這些特征都與扁平化2.0的有所不同,標(biāo)志著新的發(fā)展階段的到來(lái)。下面就一起來(lái)看看吧!
元素更趨扁平化
扁平化設(shè)計(jì)2.0中的按鈕風(fēng)格和用戶界面元素在今天已經(jīng)不那么適用了。現(xiàn)在,按鈕的樣式要比以往更加簡(jiǎn)單,常常是方形或圓角邊緣的矩形框配以黑白色的文本,網(wǎng)站LOGO和圖標(biāo)也都采用更加扁平化的風(fēng)格。各種簡(jiǎn)潔的元素再加上一個(gè)詳盡的主頁(yè)設(shè)計(jì),這樣的網(wǎng)站才能脫穎而出。
精簡(jiǎn)的導(dǎo)航菜單
由于扁平化設(shè)計(jì)要求簡(jiǎn)潔大方的設(shè)計(jì)布局,網(wǎng)站的導(dǎo)航菜單也需要更加精簡(jiǎn),這也是為什么隱藏式菜單導(dǎo)航和漢堡圖標(biāo)開(kāi)始流行。它們幾乎已經(jīng)成為當(dāng)前網(wǎng)站的標(biāo)配,給訪客提供充足的自由,既方便操作也不影響信息的傳遞,還在不同大小的屏幕上也能夠得到很好的呈現(xiàn)。
更廣泛的配色方案
大膽明亮的配色一直是扁平化設(shè)計(jì)的"寵兒"。在早期扁平化設(shè)計(jì)中,人們經(jīng)常挑選高飽和度的顏色,而在扁平化2.0時(shí)期雙色調(diào)配色是比較流行的配色方向。但隨著扁平化設(shè)計(jì)的進(jìn)一步發(fā)展,今天網(wǎng)站中使用的配色方案要更加豐富,網(wǎng)站設(shè)計(jì)師不僅使用明亮、鮮艷的顏色,也會(huì)應(yīng)用暗色系的色彩,比如在主頁(yè)使用漸變的色調(diào)或疊加圖片等,網(wǎng)頁(yè)設(shè)計(jì)要比以往更加生動(dòng)活潑。
極簡(jiǎn)的主頁(yè)設(shè)計(jì)
以往扁平化設(shè)計(jì)強(qiáng)調(diào)的極簡(jiǎn)主要在于網(wǎng)站中的各種元素、圖標(biāo)等。在2017年,網(wǎng)站的主頁(yè)設(shè)計(jì)也遵循極簡(jiǎn)主義?,F(xiàn)在的網(wǎng)站主頁(yè)更傾向于強(qiáng)調(diào)單個(gè)行為引導(dǎo),而不是復(fù)雜的元素堆疊。反過(guò)來(lái)說(shuō),就算主頁(yè)上的元素再多樣,單個(gè)的行為引導(dǎo)也會(huì)給訪客留下簡(jiǎn)潔、干凈的印象。
精致的排版
當(dāng)網(wǎng)站中不再使用復(fù)雜多樣的元素以后,網(wǎng)頁(yè)排版的重要性就凸顯出來(lái)了。前面在《巧妙利用排版和布局迅速提升網(wǎng)站顏值》中我們討論過(guò)網(wǎng)頁(yè)排版有助于強(qiáng)調(diào)視覺(jué)效果,提高網(wǎng)站可讀性和可用性,還能保持網(wǎng)站元素的一致性。在扁平化設(shè)計(jì)之中,網(wǎng)頁(yè)排版的好處可不僅僅這些,精致的網(wǎng)頁(yè)排版還能夠提升網(wǎng)站的設(shè)計(jì)美感,讓信息內(nèi)容本身很好的展現(xiàn)。
更少的擬物特效
盡管在今年的扁平化設(shè)計(jì)之中,設(shè)計(jì)師確實(shí)有使用一些微妙的元素讓網(wǎng)站設(shè)計(jì)更加豐富,但這并不意味著擬物化設(shè)計(jì)的回歸。生動(dòng)、有趣的網(wǎng)站并不總是與擬物化設(shè)計(jì)掛鉤的,他們與擬物效果有著本質(zhì)的不同。相反,現(xiàn)在的扁平化設(shè)計(jì)中使用更少的擬物效果,盡量不營(yíng)造逼真的效果。
動(dòng)效與反饋
近些日子,隨著H5/CSS3技術(shù)的發(fā)展,動(dòng)效又重新回歸大熒幕。而在扁平化設(shè)計(jì)之中,設(shè)計(jì)師常常將動(dòng)效與反饋結(jié)合在一起,這能更好的引導(dǎo)用戶、同用戶溝通,是如今交互設(shè)計(jì)和UX設(shè)計(jì)的關(guān)鍵所在。
大量留白
隨著顯示屏幕越來(lái)越大(pC端和移動(dòng)設(shè)備都是如此),設(shè)計(jì)師在網(wǎng)站中使用大量留白以保持扁平化設(shè)計(jì)的極簡(jiǎn)主義風(fēng)。與此同時(shí),留白還能夠有效突出網(wǎng)站的關(guān)鍵內(nèi)容。當(dāng)然咯,留白并不一定非得是白色。如果你對(duì)網(wǎng)站中留白手法比較感興趣,可以參閱《少即是多-怎樣在響應(yīng)式網(wǎng)站中運(yùn)用"留白"藝術(shù)》。
扁平化圖層
毫無(wú)裝飾的扁平化圖層看上去也很棒,而且還可以給用戶提供一些額外的信息,它們能成為不同元素的載體,或者單純的營(yíng)造空間感。分層設(shè)計(jì)方法就是其中一個(gè)代表。
超大的設(shè)計(jì)元素
超大的字體,超大的圖片,甚至超大的按鈕和圖標(biāo),都已經(jīng)不是什么新鮮的設(shè)計(jì)手法了,它們借助過(guò)人的體積感和強(qiáng)有力的對(duì)比來(lái)制造視覺(jué)奇觀,是非常有用的設(shè)計(jì)技巧。這種設(shè)計(jì)手法在早期的扁平化設(shè)計(jì)就有了,只不過(guò)現(xiàn)在使用更加頻繁。
扁平化設(shè)計(jì)一直在不斷進(jìn)擊,易讀性更高、可用性更強(qiáng)、視覺(jué)上更美觀,這也是為什么它能源源不斷迸發(fā)出蓬勃生機(jī)。我們?cè)谧鼍W(wǎng)站時(shí)也是一樣,不要墨守成規(guī),切實(shí)根據(jù)網(wǎng)站自身的特點(diǎn),尋找符合的模板,運(yùn)用有效的技巧,讓自己的網(wǎng)站更加出彩。扁平化設(shè)計(jì)還會(huì)一直發(fā)展下去,誰(shuí)也不知道它最終會(huì)成為什么樣,是經(jīng)典不朽還是逐漸淘汰,但不可否認(rèn)的是現(xiàn)在扁平化設(shè)計(jì)仍是大家比較擁護(hù)的設(shè)計(jì)趨勢(shì)之一。趕緊在自己的網(wǎng)站使用扁平化設(shè)計(jì)吧!
如果你沒(méi)什么想法,不妨來(lái)起飛頁(yè)看看吧!起飛頁(yè)自助建站平臺(tái)有不少扁平化設(shè)計(jì)的模板,這些模板都有著簡(jiǎn)潔的元素、圖標(biāo),多樣的配色方案,足夠的留白??靵?lái)起飛頁(yè)自助建站平臺(tái)(http://www.qifeiye.com/?t_wd=a5)做一個(gè)扁平化設(shè)計(jì)的網(wǎng)站吧!
<script>document.writeln('上一篇:
這樣才是好的用戶體驗(yàn)更多新聞
2023
簡(jiǎn)介在這個(gè)高度信息化的時(shí)代,網(wǎng)絡(luò)推廣已經(jīng)成為企業(yè)發(fā)展的關(guān)鍵策略之一。。山東網(wǎng)絡(luò)推廣作為互聯(lián)網(wǎng)營(yíng)銷的重...
View details
2023
在當(dāng)今競(jìng)爭(zhēng)激烈的市場(chǎng)中,擁有一個(gè)優(yōu)化的網(wǎng)站非常重要。。為了在搜索引擎排名中脫穎而出,您需要進(jìn)行天水網(wǎng)...
View details
2023
什么是河源網(wǎng)站開(kāi)發(fā)?河源網(wǎng)站開(kāi)發(fā)是指在河源地區(qū)為企業(yè)構(gòu)建和設(shè)計(jì)網(wǎng)站的過(guò)程。。這項(xiàng)任務(wù)涉及從計(jì)劃、設(shè)計(jì)...
View details
2023
什么是丹東網(wǎng)站建設(shè)?丹東網(wǎng)站建設(shè)是指創(chuàng)建和開(kāi)發(fā)丹東地區(qū)的網(wǎng)站。。在現(xiàn)代社會(huì),一個(gè)強(qiáng)大和有吸引力的網(wǎng)站...
View details